import React, { useState } from 'react'
import "./Goods.css"
export default function Goods() {

    //声明图片状态
    let [imgs,setImgs] = useState(["/image/1.jpg","/image/2.jpg","/image/3.jpg","/image/4.jpg","/image/5.jpg",])

    let [index,setIndex] = useState(0);
    //创建更新图片的方法
    let changeImg = (i)=>{
        return ()=>{
            setIndex(i);
        }
    }

    return (
        <div className='goods'>
            <img className='big' src={imgs[index]} alt="" />
            <ul>
                {
                    imgs.map((item,key) => {
                        return <li onMouseOver={changeImg(key)} key={key}>
                            <img className={key === index ? "bg" : null} src={item} alt="" />
                            </li>
                    })
                }
                
               
            </ul>
        </div>
    )
}
